<template>
  <div>
    <!--表单 数据双向绑定 Model 和return中的form-->
    <el-form ref="form" :rules="rules" :model="form" label-width="80px" class="login-box">
      <h1 class="login-title">欢迎登陆</h1>
      <el-form-item label="账号" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login('form')">登陆</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
    export default {
      name: "Login",
      data(){
        return {
          form: {
            username: '',
            password: '',
          },
          rules: {
            username: [
              /*失去焦点触发 blur*/
              { required: true, message: '请输入用户名', trigger: 'blur' },
              { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            password: [
              { required: true, message: '请输入密码', trigger: 'blur' }
            ]
          }
        }
      },
      methods: {
        login: function (formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              /*浏览器自带的session存储*/
              sessionStorage.setItem("isLogin","true");
              this.$router.push("/main");
            } else {
              this.$message.error('错了哦，请输入用户名密码');
            }
          });

        }
      },
    }
</script>

<style scoped>
  .login-title{
    text-align: center;
  }

  .login-box {
    width: 400px;
    /*边框*/
    border: 1px solid #DCDFE6;
    /*居中*/
    margin: 0 auto;
    margin-top: 150px;
    /*内间距 上右下左*/
    padding: 20px 50px 20px 20px;
    /*居左*/
    text-align: left;
    /*边框圆角*/
    border-radius: 10px;
    /*阴影*/
    box-shadow: 0 0 3px;
  }
</style>
